<template>
  <div class="rank-box">
    <div class="title">
      <p>热门景区排行</p>
      <p class="bg" />
    </div>
    <div class="header">
      <span class="text-1">排名</span>
      <span class="text-2">景区</span>
      <span class="text-3">预约数量</span>
    </div>
    <div ref="charts" class="echarts-box" />
  </div>
</template>

<script setup lang="ts" name="Rank">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

let charts = ref();

onMounted(() => {
  let myCharts = echarts.init(charts.value);
  let options = {
    grid: {
      top: 10,
      left: 170,
      right: 80,
      bottom: 0,
    },
    title: {
      text: '热门景区排行',
      show: false,
    },
    xAxis: {
      show: false,
    },

    yAxis: {
      type: 'category',
      inverse: true,
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#fff',
        align: 'center',
        margin: 55,
        fontSize: 16,
      },
      data: ['峨眉山', '稻城亚丁', '九寨沟', '万里长城', '北京故宫'],
    },
    series: [
      {
        type: 'bar',
        data: [90, 80, 70, 60, 50],
        barWidth: 20,
        z: 100,
        label: {
          show: true,
          // position: 'insideLeft',
          color: '#fff',
          fontSize: 16,
          position: [10, 5],
          formatter: function (data: any) {
            return data.data.toFixed(2) + '%';
          },
        },
        itemStyle: {
          color: function (data: any) {
            let colorArr = ['#0582F0', '#FF7F71', '#4BC7E4', '#FFB23C', '#8A81F8'];
            return colorArr[data.dataIndex];
          },
          borderRadius: [10, 10, 10, 10],
        },
      },
      {
        type: 'bar',
        data: [100, 100, 100, 100, 100],
        barWidth: 26,
        barGap: '-115%',
        label: {
          show: true,
          position: [210, 7],
          color: '#fff',
          fontSize: 16,
          formatter: function (data: any) {
            let Arr = [90, 80, 70, 60, 50];
            return (Arr[data.dataIndex] / 10).toFixed(2) + 'w';
          },
        },
        itemStyle: {
          borderRadius: [10, 10, 10, 10],
          color: 'transparent',
          borderType: 'soild',
          borderColor: '#358AD1',
          borderWidth: 2,
        },
      },

      {
        type: 'bar',
        data: [100, 100, 100, 100, 100],
        barWidth: 26,
        barGap: '-115%',
        label: {
          show: true,
          position: [-145, 4],
          color: '#fff',
          fontSize: 16,
          formatter: function (data: any) {
            return `No.${data.dataIndex + 1}`;
          },
          padding: [4, 6, 4, 6],
        },
        itemStyle: {
          color: 'transparent',
        },
      },
    ],
  };
  myCharts.setOption(options);
});
</script>

<style lang="scss" scoped>
.rank-box {
  background: url('../../../../assets/images/screen/dataScreen-main-rt.png') no-repeat;
  background-size: 100% 100%;
  //   padding: 20px;
  //   box-sizing: border-box;
  .title {
    color: white;
    font-size: 20px;
    .bg {
      width: 68px;
      height: 7px;
      background: url('../../../../assets/images/screen/dataScreen-title.png') no-repeat;
      background-size: 100% 100%;
      margin-top: 10px;
    }
  }
  .header {
    height: 40px;
    width: calc(100% - 20px);
    background: url('../../../../assets/images/screen/rankingChart-bg.png') no-repeat;
    background-size: 100% 100%;
    margin: 30px 10px 0 10px;
    color: #f19c07;
    display: flex;
    text-align: center;
    align-items: center;
    .text-1 {
      flex: 1;
    }
    .text-2 {
      flex: 1;
    }
    .text-3 {
      flex: 4;
    }
  }
  .echarts-box {
    margin-top: 0px;
    height: calc(100% - 120px);
  }
}
</style>
